<template>
  <div class="continer">
    <div class="title">
        <span>名称</span>
        <span>操作</span>
    </div>
    <div class="item" v-for="(item,index) in data" :key="item">
        <span class="name">{{ item }}</span>
        <div class="operate">
            <span @click="up(index)">上移</span>
            <span @click="down(index)">下移</span>
            <span @click="first(index)">置顶</span>
            <span>修改</span>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const tableData = ['红色','黄色','白色','LANSE','RED','BLUE'];

const data = ref(tableData);

const up = (index) => {
    console.log(index);
    if(!index) return;
    let temp = data.value[index] ;
    console.log(temp);
    data.value[index] = data.value[index-1];
    data.value[index-1] = temp;
}

const down = (index) => {
    console.log(index);
    if(index===data.value.length-1) return;
    let temp = data.value[index] ;
    console.log(temp);
    data.value[index] = data.value[index+1];
    data.value[index+1] = temp;
}

const first = (index) => {
    if(!index)  return;
    const temp = data.value[0];
    data.value[0] = data.value[index];
    data.value[index] = temp;
}
</script>

<style scoped>
.continer{
    width: 800px;
    margin:50px auto;
}

.title,.item{
    display: flex;
    width: 50%;
    margin:0px auto;
}

.title span{
    flex:1;
}

.item{
    background: gold;
}


.item:nth-child(2n){
    background: skyblue;
}
.item .name{
    width: 50%;
}

.operate span{
    color:blue;
    margin:0 6px;
}


</style>